.app{
  width: 100%;
  height: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(93, 223, 255, 0.486);
}
.app .box{
  position: relative;
  width: 13vw;
  height: 22vw;
  display: flex;
  flex-direction: column;
  margin-left: 1vw;
  margin-right: 1vw;
  background-color: white;
  border-radius: 1vw;
  overflow: hidden;
}
.app .box span{
  margin-left: 1vw;
  margin-top: 2vw;
  font-size: 1vw;
  font-weight: 800;
}
.app .box .img{
  height: 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.app .box .img img{
  border-radius: 2vw;
  height: 4vw;
  width: 4vw;
}
.app .box button{
  font-size: 1vw;
  font-weight: 800;
  margin-top: 2.5vw;
  border-radius:0vw 0vw 0.5vw 0.5vw;
  background-color: #eee;
  z-index: 999;
}
.app .box .scores{
  margin-top: 25vw;
  position:absolute;
  height: 15.5vw;
  width:13vw;
  background-color: #6f6c85;
  transition: all .5s;
  /* display: none; */
}
.app .box .scores .in{
  display: flex;
  flex-direction: column;

}
.app .box button:hover~.scores{
  margin-top: 5vw;
  transition:all 0.5s;
  /* display: block; */
}